<style scoped>

.signwrapper {
    background-image: url('../../asset/img/login_bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

.sign-overlay {
    background-image: url('../../asset/img/login_dot.png');
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    opacity: 1;
}

@media (max-width: 767px) {
    .sign-overlay {
        display: none;
    }
}

.signpanel {
    background-color: rgba(0, 0, 0, 0.95);
    background-image: -webkit-linear-gradient(left, transparent 0%, #1b1f27 100%);
    background-image: -o-linear-gradient(left, transparent 0%, #1b1f27 100%);
    background-image: linear-gradient(to right, transparent 0%, #1b1f27 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#ff1b1f27', GradientType=1);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 200;
    opacity: .75;
}

@media (max-width: 767px) {
    .signpanel {
        background-image: none;
        background-color: #262b36;
        opacity: 1;
    }
}

.signin {
    width: 440px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(38, 43, 54, 0.9);
    
    z-index: 300;
}

@media (max-width: 767px) {
    .signin {
        top: 20px;
        left: 0;
        transform: none;
        width: 400px;
        position: relative;
        margin: auto;
        padding-top: 0;
    }
}

@media (max-width: 360px) {
    .signin {
        width: 320px;
    }
}

.signin h1 {
    display: block;
    text-align: center;
    font-size: 50px;
    color:#fff;
    /* background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#3491DB), to(#710DFD));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    letter-spacing:15px;
    /* height: 60px; */
    /* background: url('../../asset/img/logo.png') center center no-repeat; */
    background-position: center center;
    background-repeat: no-repeat;
}
.panel-heading{
    padding: 60px 20px 10px 20px;
}
.panel-body{
    background-color: #2d313d;
    padding: 30px 20px 40px 20px;
}
.signin .forgot {
    margin-bottom:20px;
    color: rgba(255, 255, 255, 0.5);
    display: inline-block;
    -webkit-transition: all 0.2s ease-out 0s;
    -o-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}

.signin .forgot:hover,
.signin .forgot:focus {
    color: #fff;
}

.signin .btn-fb {
    color: rgba(255, 255, 255, 0.8);
}

.signin .btn-fb:hover,
.signin .btn-fb:focus {
    color: rgba(255, 255, 255, 0.5);
}

.mb10 {
    margin-bottom: 20px;
}

.signwrapper .input-group>.input-group-addon {
    background-color: #fff;
    border-color: transparent;
    padding-right: 0;
}



.or {
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    text-align: center;
    margin: 30px 0 30px 0;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
}

.or:before {
    content: '';
    position: absolute;
    width: 30%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    top: 13px;
    left: 0;
}

.or:after {
    content: '';
    position: absolute;
    width: 30%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    top: 13px;
    right: 0;
}

.input-group {
    width: 400px;
}

.form-tab{
    height: 40px;
    line-height: 40px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    cursor: pointer;
    border-top: 2px solid transparent;
}
.form-tab.active{
    background-color: #2d313d;
    border-top: 2px solid #454c5b;
}

.hb-background{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

.login-page{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.login-box{
    width: 465px;
    padding: 4px;
    /* max-width: 465px; */
    background-image: url('../../asset/img/login_box_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-left: 50%;
    margin-top: -5%;
}
.login-box-tab{
    height: 62px;
    line-height:62px;
    /* background-image: url('../../asset/img/hb_login_tab_bg.png');
    background-repeat: no-repeat;
    background-size: 465px 62px; */
}
.login-box-tab-item{
    text-align: center;
    font-weight: bold;
    color: #3c3121;
    font-size: 20px;
    cursor: pointer;
}

.officebg{
    height: 62px;
    line-height:62px;
    background-image: url('../../asset/img/hb_login_office_bg.png');
    background-repeat: no-repeat;
    background-size: 465px 62px;
}
.fieldbg{
    height: 62px;
    line-height:62px;
    background-image: url('../../asset/img/hb_login_field_bg.png');
    background-repeat: no-repeat;
    background-size: 465px 62px;
}
.hb-login-box{
    width: 100%;
    max-width: 326px;
    margin: 20px auto 0;
}
.hb-login-item{
    position: relative;
    width: 100%;
    width: 326px;
    margin-bottom: 30px;
}
.hb-login-box-input input.ivu-input{  
    width: 100%;
    height: 46px;
    line-height: 46px;
    border: 1px solid #c9a77e;
    padding-left: 40px;
}
.user-name{
    position: absolute;
    left: 10px;
    top: 11px;
    width: 22px;
    height: 22px;
    background-image: url('../../asset/img/icon_user.png');
    background-repeat: no-repeat;
    background-size: 22px 22px;
    z-index: 1;
}
.user-psd{
    position: absolute;
    left: 10px;
    top: 11px;
    width: 20px;
    height: 24px;
    background-image: url('../../asset/img/icon_psd.png');
    background-repeat: no-repeat;
    background-size: 20px 24px;
    z-index: 1;
}
.hb-login-btn{
    overflow: hidden;
    display: block;
    margin: 60px 15px 20px;
    height: 52px;
    line-height: 52px;
    font-size: 20px;
    font-weight: bold;
    color: #3c3121;
    text-align: center;
    background-image: url('../../asset/img/hb_login_btn_bg.png');
    background-repeat: no-repeat;
    background-size: 100%;

}
.hb-logo{
    position: absolute;
    left: 4vw;
    top: 8vh;
}
.mt-20{
    margin-top: 20px;
}
.mb20{
    margin-bottom: 20px;
}
</style>
<style>
.hb-login-box-input input.ivu-input{  
    width: 100%;
    height: 46px;
    line-height: 46px;
    border: 1px solid #c9a77e;
    padding-left: 40px;
}
.signwrapper .input-group input {
    border-color: transparent;
    background-color: #fff;
}

.signwrapper .input-group input {
    position: relative;
    z-index: 2;
    width: 376px;
    margin-bottom: 0;
}

.signwrapper .input-group input {
    display: block;
    width: 100%;
    height: 50px;
    padding: 5px 12px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #262b36;
    background-color: #fcfcfd;
    background-image: none;
    border: 1px solid #bdc3d1;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.signwrapper .input-group input:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.signwrapper .input-group.btn-login {
    width: 100%;
    height: 50px;
    background-color: #3a5795!important;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
    letter-spacing: .5px;
    border-radius: 2px;
    font-size: 16px;                                   
    font-family: "Microsoft Yahei";
    border:none;
}
</style>

<template>
    <div style="position:relative;">
        <div v-if="!getHbId">
            <div class="login-page signwrapper" v-on:keydown.13="handleSubmit('formItem')" :style="wrapStyle">
                <div class="sign-overlay"></div>
                <div class="signpanel"></div>

                <div class="panel signin">
                    <div class="panel-heading">
                        <!-- <h1 :style="{backgroundImage: 'url(' + logo + ')'}"></h1> -->
                        <h1>{{name}}</h1>
                    </div>
                    <div class="or">{{name}}管理后台登陆</div>
                    <div class="panel-body">                
                        <Form ref="formItem" :model="formInline" :rules="ruleInline" class="form_box">
                            <Form-item prop="userName" class="form-group mb10">
                                <span class="input-group-addon">
                                    <i class="glyphicon glyphicon-lock"></i>
                                </span>
                                <Input type="text" class="input-group" v-model="formInline.userName" placeholder="用户名" />
                            </Form-item>
                            <Form-item prop="password" class="form-group nomargin">
                                <Input type="password" class="input-group" v-model="formInline.password" placeholder="密码" />
                            </Form-item>
                            <!-- <FormItem>
                                <RadioGroup v-model="formInline.user_type">
                                    <Radio label="2">普通用户</Radio>
                                    <Radio label="1">管理员</Radio>
                                </RadioGroup>
                            </FormItem> -->
                            <Form-item class="form-group" style="margin-bottom:0px;">
                                <Button class="btn-login input-group" type="primary" @click="handleSubmit('formItem')">登录</Button>
                            </Form-item>
                        </Form>
                    </div>
                </div>
                <!-- panel -->
            </div>
        </div>
        <div v-else>
            <img src="../../asset/img/hb_login.png" class="hb-background"/>
            <img src="../../asset/img/hb_logo.png" class="hb-logo" />
            <div class="login-page">
                <div class="login-box">
                    <div class="login-box-tab">
                        <Row :class="tabTag == 1 ? 'officebg' : 'fieldbg'">
                            <Col span="12" class="login-box-tab-item" @click.native="tabChange(1)">内勤员工</Col>
                            <Col span="12" class="login-box-tab-item" @click.native="tabChange(2)">营销团队</Col>
                        </Row>
                    </div>
                    <div>
                        <div class="hb-login-box">
                            <Form ref="formItem" :model="formInline" :rules="tabTag == 1 ?ruleInline : field" class="form_box">
                                <Form-item prop="userName" class="hb-login-item">
                                    <label class="user-name" for="hb_user"></label>
                                    <Input type="text" class="hb-login-box-input" v-model="formInline.userName" placeholder="用户名" />
                                </Form-item>
                                <Form-item prop="password" class="hb-login-item">
                                    <label class="user-psd" for="hb_password"></label>
                                    <Input type="password" class="hb-login-box-input" v-model="formInline.password" placeholder="密码" />
                                </Form-item>
                            </Form>
                        </div>
                        <a href="javascript:;" @click="handleSubmit('formItem')" class="hb-login-btn">登录</a>
                    </div>
                </div>
            </div>
        </div>
        <Modal
            v-model="misModal"
            title="您有以下账号可选择"
            @on-ok="ok"
            @on-cancel="cancel">
            工号-- 姓名-- 归属机构
            <div class="mt-20 mb20">
                <Select v-model="misUser">
                    <Option v-for="item in userList" :value="item.id" :key="item.id">{{ item.job_code }}--{{ item.name }}--{{ item.yun_name }}</Option>
                </Select>
            </div>
            
        </Modal>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { login , getLoginLogo , loginMis , loginMisUser } from '../../api/login'
export default {
    data() {
        return {
            wrapStyle: {
                width: '100%',
                height: '0px'
            },
            formInline: {
                userName: '',
                password: '',
                user_type:1,
            },
            logo:'http://i.kuaibao365.com/yun_login_logo/kuaibao.png',
            cid:'',
            name:'快保云',
            ruleInline: {
                userName: [
                    { required: true, message: '请填写用户名', trigger: 'change' }
                ],
                password: [
                    { required: true, message: '请填写密码', trigger: 'change' },
                    { type: 'string', min: 8, message: '密码长度不能小于8位', trigger: 'change' }
                ]
            },
            field:{
                userName: [
                    { required: true, pattern: /^1[0-9][0-9]\d{8}$/, message: '请正确填写用户名', trigger: 'change' }
                ],
                password: [
                    { required: true, message: '请填写密码', trigger: 'change' },
                ]
            },
            tabTag:1,
            misUser:'',
            userList:[],
            misModal:false,
        }
    },
    created() {
        
    },
    computed: {
        getHbId(){
            if(this.$route.params.id == 47){
                return true
            }else{
                return false
            }
        }
    },
    mounted () {
        let winHeight = window.innerHeight;
        this.wrapStyle.height = winHeight + 'px';
        this.name = '快保云'
        // if(this.$route.params.id){
        //     if(this.$route.params.id != 0){
        //         this.getLogo(this.$route.params.id)
        //     }else{
        //         this.name = '快保云'
        //     }
        // }   
    },
    methods: {
        ok(){
            let _params = {
                id:this.misUser,
                pwd:this.formInline.password
            }
            new Promise((resolve, reject) => {
                loginMisUser(_params).then(response => {
                    if (response.data.code == 0) {
                        window.location.href = 'https://mis.kuaibao365.com'
                    } else {
                        this.$Message.error(response.data.msg);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        cancel(){
            this.misModal = false
        },
        tabChange(index){
            this.tabTag = index == 1 ? 1 : 2
        },
        getLogo(id){
            let _params = {
                id:id
            }
            new Promise((resolve, reject) => {
                getLoginLogo(_params).then(response => {
                    if (response.data.err == 0) {
                        this.name = response.data.data.name;
                        this.cid =  response.data.data.id;
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.loginIn();
                } else {
                    this.$Message.error('请填写正确账号密码!');
                }
            })
        },
        loginIn() {
            
            if(this.tabTag == 1){
                let _params = {
                    'userName': this.formInline.userName,
                    'password': this.formInline.password,
                }
                new Promise((resolve, reject) => {
                    login(_params).then(response => {
                        if (response.data.err == 0) {
                            this.$Message.success('登录成功!');
                            let _value = {
                                'id': response.data.data.id,
                                'name': response.data.data.name,
                                'avatar': response.data.data.logo,
                                'role_id': response.data.data.role_id,
                                // 'token': response.data.data.token
                            }
                            this.$store.dispatch('setUser', _value);                       
                            sessionStorage.setItem('token', response.data.data.token);
                            sessionStorage.setItem('id', response.data.data.id);
                            
                            sessionStorage.setItem('cname', this.name);
                            sessionStorage.setItem('cid', this.cid);
                            location.reload();
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                }).catch(error => {
                       console.log(error);
                });
            }else{
                let _params = {
                    'name': this.formInline.userName,
                    'pwd': this.formInline.password,
                }
                new Promise((resolve, reject) => {
                    loginMis(_params).then(response => {
                        if (response.data.code == 0) {
                            window.location.href = 'https://mis.kuaibao365.com'
                        } else if(response.data.code == -1){
                            this.$Message.error(response.data.msg);
                        }else{
                            this.userList = response.data.lists
                            this.misUser = this.userList[0].id
                            this.misModal = true
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            }
            
        }
    }
}
</script>


